<template>
  <div class="header">
    <div class="header-left">
      <h1>宠物商城后台管理系统</h1>
    </div>
    <div class="header-right">
      <el-button type="warning" @click="logout" size="mini" plain
        >退出</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    logout() {
      this.$router.push("/login");
      sessionStorage.clear();
    },
  },
};
</script>

<style scoped>
.header {
  background-color: #274767;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 80px;
  /* 增加顶部导航的高度 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* 添加阴影以提升层次感 */
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left h1 {
  color: white;
  margin: 0;
  font-size: 24px;

  /* 增加字体大小 */
}

.header-right {
  display: flex;
  align-items: center;
}

.el-button {
  margin-right: -10px;
  /* 调整按钮位置，使其不超出边界 */
}
</style>
